<template>
  <div class="app-container">
   <el-form :inline="true" :model="form"  class="demo-form-inline">
     <el-form-item label="订单编号">
       <el-input v-model="form.orderNo" placeholder="请输入订单编号"></el-input>
     </el-form-item>
     <el-form-item label="仓库地址">
       <el-input v-model="form.warehouseName" placeholder="请输入仓库地址"></el-input>
     </el-form-item>
     <el-form-item prop="shippingType" label="运输方式">
       <el-select v-model="form.shippingType"  placeholder="物流状态">
         <el-option label="快递" value="0"></el-option>
         <el-option label="物流" value="1"></el-option>
         <el-option label="自提" value="2"></el-option>
       </el-select>
     </el-form-item>
<!--     <el-form-item label="物流状态">-->
<!--       <el-select  placeholder="物流状态">-->
<!--         <el-option label="未签收" value="0"></el-option>-->
<!--         <el-option label="签收" value="1"></el-option>-->
<!--         <el-option label="损坏返回" value="2"></el-option>-->
<!--       </el-select>-->
<!--     </el-form-item>-->
     <el-form-item>
       <el-button type="primary"  @click="seach" >查询</el-button>
       <el-button  @click="reaet">重置</el-button>
     </el-form-item>
    </el-form>
    <el-card>
      <el-button @click="openDialog" type="success" size="mini" style="margin-bottom: 10px" icon="el-icon-plus">新增</el-button>
      <el-table style="width: 100%" :data="list" border>
        <el-table-column  type="index" label="序号" ></el-table-column>
        <el-table-column prop="orderProperty" label="出入库类型">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.orderProperty==1">出库</el-button>
            <el-button type="text" v-if="scope.row.orderProperty==2">入库</el-button>
          </template>
        </el-table-column>
        <el-table-column width="160" prop="orderNo" label="订单编号"></el-table-column>
        <el-table-column width="160" prop="outboundNo" label="出库单编号"></el-table-column>
        <el-table-column width="160" prop="returnApplyNo" label="入库申请编号"></el-table-column>

        <el-table-column prop="projectAddress" label="目的地"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" ></el-table-column>
        <el-table-column prop="logisticsExpenses" label="物流费用" ></el-table-column>
        <el-table-column prop="shippingType" label="运输方式" ></el-table-column>
        <el-table-column prop="driverName" label="司机名称" ></el-table-column>
        <el-table-column prop="driverTel" label="司机电话" ></el-table-column>
        <el-table-column prop="vehicleInformation" label="司机车辆信息" ></el-table-column>
<!--        <el-table-column prop="logisticsStatus" label="物流状态" ></el-table-column>-->
        <el-table-column prop="warehouseName" label="仓库名"></el-table-column>

        <el-table-column label="操作" >
          <template slot-scope="scope">
<!--            <el-button type="text" size="small" @click="handInfo(scope.row)">查看详情</el-button>-->
<!--            <el-button type="text" size="small" @clik="editFn(scope.row)">修改</el-button>-->
            <el-button   v-hasPermi="['module:logisticscost:delete']" type="text" size="small" @click="delFn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pageNum"
        :page-sizes="[10, 20, 30, 40,50]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </el-card>
<!--新增/修改-->
    <el-dialog  :title="this.form.id?'修改物流':'新增物流'" :visible.sync="show" width="50%">
        <el-form :model="form" inline :rules="formRules" ref="form" label-width="100px">
          <el-form-item label="订单编号"  prop="orderNo">
            <el-input v-model="form.orderNo">
              <template slot="append">
                <el-button style="width:60px" type="primary" @click="orderListFn">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="仓库名"  prop="warehouseName">
            <el-input v-model="form.warehouseName"></el-input>
          </el-form-item>
          <el-form-item label="项目名称"  prop="projectName">
            <el-input v-model="form.projectName"></el-input>
          </el-form-item>
          <el-form-item label="目的地"  prop="projectAddress">
            <el-input v-model="form.projectAddress"></el-input>
          </el-form-item>
          <el-form-item label="运输方式" prop="shippingType">
            <el-select  v-model="form.shippingType"  placeholder="运输方式">
              <el-option
                v-for="item in LogisticsOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出入库类型" prop="orderProperty">
            <el-select  v-model="form.orderProperty"  placeholder="出入库类型">
              <el-option
                v-for="item in  typeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="司机姓名" prop="driverName">
            <el-input v-model="form.driverName" placeholder="请输入司机姓名"></el-input>
          </el-form-item>
          <el-form-item label="司机联系方式" prop="driverTel">
            <el-input  v-model="form.driverTel" placeholder="请输入司机联系方式"></el-input>
          </el-form-item>
          <el-form-item label="车辆信息" prop="vehicleInformation">
            <el-input  v-model="form.vehicleInformation" placeholder="请输入车辆信息"></el-input>
          </el-form-item>

          <el-form-item label="物流费用" prop="logisticsExpenses">
            <el-input v-model="form.logisticsExpenses" placeholder="请输入物流费用"></el-input>
          </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show=false">取 消</el-button>
        <el-button type="primary" @click="BtnOk">确 定</el-button>
      </span>
    </el-dialog>
<!--    租赁订单选择框-->
    <!-- 租赁订单选择框-->
    <el-dialog
      title="请选择租赁订单"
      :visible.sync="orderListIsShow"
      width="50%"
      @close="OrderListClose">
      <el-form :model="OrderFormData" inline  label-width="100px" >
        <el-form-item label="客户姓名" prop="customerName">
          <el-input style="width: 240px" v-model="OrderFormData.customerName" placeholder="请选择客户名" >
<!--            <template slot="append">-->
<!--              <el-button type="primary" @click="openProject">-->
<!--                选择客户-->
<!--              </el-button>-->
<!--            </template>-->
          </el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-input style="width: 240px" v-model="OrderFormData.projectName" placeholder="请输入项目名称" >
<!--            <template slot="append">-->
<!--              <el-button type="primary" @click="openProject">-->
<!--                选择项目-->
<!--              </el-button>-->
<!--            </template>-->
          </el-input>
        </el-form-item>

        <el-form-item label="订单状态" prop="orderStatus">  <el-select v-model="OrderFormData.orderStatus" placeholder="请选择订单状态">
          <el-option
            v-for="item in OrderOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select></el-form-item>
      </el-form>
      <el-button style="margin-bottom: 15px;margin-left: 100px;" size="small" type="success" @click="SearchOrderNo">查询</el-button>
      <el-table :data="OrderList" tooltip-effect="dark" style="width: 100%">
        <el-table-column align="center" label="订单编号" prop="orderNo" width="150"></el-table-column>
        <el-table-column align="center" prop="customerName" label="客户名称" width="120"></el-table-column>
        <el-table-column align="center" prop="projectName" label="项目名" width="120"></el-table-column>
        <el-table-column align="center" prop="salesmanName" label="业务员" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="orderDate" label="订单创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="checked(scope.row.orderNo)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import {getLogisticsListApi,getLogisticsInfoApi,addLogisticsApi,editLogisticsApi,delLogistApi} from '@/api/module/logistics'
import {getDicts} from "@/api/system/dict/data";
import {listOrder} from '@/api/module/order'
export default{
  data(){
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入电话号码'))
      }
      if (value.length !== 11) {
        callback(new Error('请输入正确电话号码'))
      }
      if (value.length !== 11) {
        callback(new Error('请输入正确电话号码'))
      }
      // 验证电话号码手机号码，包含至今所有号段? ?
      var ab = /^[1][3|4|5|6|7|8|9][0-9]{9}$/
      if (ab.test(value) === false) {
        callback(new Error('请输入正确电话号码'))
      }
      callback()
    }
    return{
      total:'',
        list:[],
      form:{
        pageSize:10,
        pageNum:1,
        id:null,
        orderId:null,
        orderProperty:'1',
        logisticsExpenses:null,
        projectName:null,
        orderNo:null,
        projectAddress:null,
        shippingType:null,
        driverName:null,
        driverTel:null,
        vehicleInformation:null,
        logisticsStatus:null,
        warehouseName:null,
        outboundNo:null,
        returnApplyNo:null,
      },

      show:false,//弹框是否打开
    LogisticsOptions:[],//w物流运输方式
      typeOptions:[],//出入库类型
      formRules:{
        orderNo:[{required:true,message:'请输入订单编号',trigger:'blur'}],
        projectName:[{required:true,message:'请输入项目名称',trigger:'blur'}],
        projectAddress:[{required:true,message:'请输入地址',trigger:'blur'}],
        shippingType:[{required:true,message:'请选择运输方式',trigger:'blur'}],
        orderProperty:[{required:true,message:'请选择入库类型',trigger:'blur'}],
        driverName:[{required:true,message:'请输入司机姓名',trigger:'blur'}],
        driverTel:[{required:true,message:'请输入司机联系方式',trigger:'blur'},{ validator: validatePhone, trigger: 'blur' }],
        logisticsExpenses:[{required:true,message:'请输入物流费用',trigger:'blur'}],

      },//表单检验
      OrderOptions:[],//订单类型
      orderListIsShow:false,//订单选择框
      OrderList:[],//订单选择列表
      OrderFormData:{
        projectName:'',
        customerName:'',//客户名称
        orderStatus:'1'
      },

    }

  },
  created() {
    this.initData()
    this.getLogisticsList()
    this.gettypeOptions()
    this.getOrderOptions()
  },
  methods:{
  //  分页
    handleSizeChange(val){
      this.form.pageSize=val
      this.initData()
    },
    handleCurrentChange(val) {
      this.form.pageNum=val
      this.initData()
    },
  //  获取物流信息列表
      async initData(){
         let res=await getLogisticsListApi(this.form)
        res.rows.forEach(item=>{
          item.shippingType=this.getValue(this.LogisticsOptions,item.shippingType)
        })
        this.list=res.rows
        this.total=res.total
       },
    getValue(arr, item) {
      for (let i = 0; i < arr.length; i++) {
        if (item === arr[i].dictValue) {
          return arr[i].dictLabel
        }
      }
    },
    //获取物流运输方式
    async getLogisticsList(){
      let res=await getDicts('biz_shipping_type')
      this.LogisticsOptions=res.data
    },
    //出入库类型
    async gettypeOptions(){
      let res=await getDicts('out_return_type')
      this.typeOptions=res.data
    },
    //获取租赁订单状态
    async getOrderOptions(){
      let res=await getDicts('order_type')
      this.OrderOptions=res.data
    },
//打开选择租赁订单
    async orderListFn(){
      this.orderListIsShow=true
      let res=await listOrder(this.OrderFormData)
      this.OrderList=res.rows
    },
   async  SearchOrderNo(){
      let res=await listOrder(this.OrderFormData)
     this.OrderList=res.rows
    },
    async checked(val){
       this.orderListIsShow=false
          this.form.orderNo=val

      let res=await listOrder({orderNo:val})
          this.form.orderId=res.rows[0].id
          this.form.projectName=res.rows[0].projectName
          this.form.projectAddress=res.rows[0].address
      this.form.warehouseName=res.rows[0].deliveryWarehouseName
    },

    //  选择租赁订单
    OrderListClose(){
      this.OrderFormData={
        customerName: "",
        projectName: '',
        orderStatus:'1'
      }
      this.OrderList=[]
    },

  // 新增物流弹框
    openDialog(){
        this.show=true
    },
  // 确认事件
    async BtnOk(){
        try {
          await this.$refs.form.validate();
          if(this.form.id){
              await editLogisticsApi(this.form)
          }else {
            await addLogisticsApi(this.form)
          }
          this.show=false
          this.$message.success('操作成功')
          await this.initData()
        }catch(error){
          console.log(error)
        }
    },
  //  查看详情
    async handInfo(){

        let res=await getLogisticsInfoApi(this.form)
    //  赋值

    },
  //  删除
    async delFn(val){
        await this.$confirm('是否确认删除')
        await delLogistApi(val.id)
      this.$message.success('删除成功')
      await this.initData()
    },
    async seach(){
       await  this.initData()
    },
   async reaet(){
        this.form={
          id:null,
          orderId:null,
          orderProperty:null,
          logisticsExpenses:null,
          projectName:null,
          orderNo:null,
          projectAddress:null,
          shippingType:null,
          driverName:null,
          vehicleInformation:null,
          logisticsStatus:null,
          warehouseName:null,
          outboundNo:null,
          returnApplyNo:null,
        }
          await this.initData()

    }
  }
}
</script>
